<template>
    <div>
        <!-- 我是管理员 -->
        <div class="top">
            <h1 class="titletext">设备管理</h1>
        </div>
        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ startIndex + $index }}
                </template>
            </el-table-column>
            <el-table-column prop="dname" label="设备名" width="180" />
            <el-table-column prop="dstatus" label="设备状态">
                <template #default="scope">
                    {{ scope.row.dstatus === 0 ? "未添加" : (scope.row.dstatus === 1 ? "未使用" : "已使用") }}
                </template>
            </el-table-column>
            <el-table-column prop="createName" label="创建人" />
            <el-table-column prop="updatetime" label="时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" @click="handleEquipment(scope.$index, scope.row)">
                        设备申请审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:page-size="queryParams.pageSize" :page-sizes="[5, 10, 15]" layout="  prev, pager, next"
            :total="queryParams.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        <!-- 设备分配对话框 -->
        <el-dialog v-model="dialogVisible" title="设备申请审核" width="600" :before-close="handleClose">
            <div>
                <el-table :data="dialogtable" style="width: 100%;text-align: center;" empty-text="暂无数据">
                    <el-table-column type="index" label=" 序号" width="60px" />
                    <el-table-column prop="uname" label="用户名" />
                    <el-table-column prop="dname" label="设备名称" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="success" size="small" @click="handlePass(scope.row)">
                                通过
                            </el-button>
                            <el-button type="danger" size="small" @click="handleOver(scope.row)">
                                驳回
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { getList, getAuditList, getAudit } from '@/api/Device/index'
import { ref, onMounted, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const locale = zhCn;

let tableData = ref([])
const ReviseFrom = reactive({
    username: ''
});
const startIndex = computed(() => {
    return (queryParams.pageNum - 1) * queryParams.pageSize + 1;
});
let queryParams = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0,
})

const dialogVisible = ref(false)
// 获取会话存储里面的 rname 判断是管理员还是普通用户
const storedUsername = sessionStorage.getItem('rname')

onMounted(() => {
    handleList()
})
const handleList = () => {
    getList(queryParams).then(res => {
        tableData.value = res.data.records
        queryParams.total = res.data.total
    })
}

const handleCurrentChange = (val) => {
    queryParams.pageNum = val;
    handleList();
};
const handleSizeChange = (val) => {
    queryParams.pageSize = val;
    handleList();
};
// 设备分配的点击事件
const dialogtable = ref('');
const handleEquipment = (e, row) => {
    dialogVisible.value = true
    getAuditList(row.did).then(res => {
        console.log(res)
        dialogtable.value = res.data
    })
}
// 通过按钮
const handlePass = (e) => {
    const passdata = ref({
        drid: e.drid,
        did: e.did,
        status: 1,
        uid: e.uid
    })
    console.log(passdata.value);
    dialogVisible.value = false
    getAudit(passdata.value).then(res => {
        handleList()
        dialogVisible.value = false
        ElMessage({
            message: '审核通过',
            type: 'success',
        })
    }).catch(error => {
        console.log(error)
    })
}
const handleOver = (e) => {

    const passdata = ref({
        did: e.did,
        drid: e.drid,
        status: 0
    })
    getAudit(passdata.value).then(res => {
        console.log(res)
    })
}
</script>

<style lang="scss" scoped>
.top {
    height: 2vh;
    padding: 30px 0px;
    /* background-color: #f9f9f9; */
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /*顶部标题 */
    .titletext {
        font-size: 20px;
        font-weight: bold;
        border-left: 5px solid #409eff;
        padding-left: 10px;
    }
}

.disabled-date {
    pointer-events: none;
    /* 禁用鼠标交互 */
    color: gray;
    /* 改变颜色表示禁用状态 */
    text-decoration: line-through;
    /* 可添加删除线等样式进一步提示禁用 */
}
</style>